<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-29 16:03:57
 * @LastEditTime: 2020-11-14 15:35:17
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/pages/goods/add.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="goods-add">
        <div class="ga-step">
            <i-steps :current="step" style="width: 50%">
                <i-step title="进行中" content="基础信息"></i-step>
                <i-step title="待进行" content="商品规格"></i-step>
                <i-step title="待进行" content="商品促销"></i-step>
                <i-step title="待进行" content="添加成功"></i-step>
            </i-steps>
        </div>
        <div class="ga-form">
            <div class="gf-common gf-base" v-if="step === 0">
                <div class="gc-input">
                    <i-form :model="form.base" :label-width="100">
                        <i-form-item label="分类：" prop="select">
                            <i-cascader :data="cascader.goodsCategory"></i-cascader>
                        </i-form-item>
                        <i-form-item label="品牌：">
                            <i-select>
                                <i-option
                                    :key="key"
                                    :value="item.id"
                                    v-for="(item, key) in select.goodsBrand"
                                >{{item.name}}</i-option>
                            </i-select>
                        </i-form-item>
                        <i-form-item label="名称：">
                            <i-input v-model="form.base.name"></i-input>
                        </i-form-item>
                        <i-form-item label="标题：">
                            <i-input v-model="form.base.title" placeholder="商品标题"></i-input>
                        </i-form-item>
                        <i-form-item label="描述：">
                            <i-input
                                type="textarea"
                                :autosize="{ minRows: 6, maxRows: 10 }"
                                v-model="form.base.description"
                                placeholder="商品描述"
                            ></i-input>
                        </i-form-item>
                        <i-form-item label="市场价：">
                            <i-input v-model="form.base.marketAmount" placeholder="市场价"></i-input>
                        </i-form-item>
                        <i-form-item label="售价：">
                            <i-input v-model="form.base.amount" placeholder="商品售价"></i-input>
                        </i-form-item>
                        <i-form-item label="相册：">
                            <img-video-previewer></img-video-previewer>
                        </i-form-item>
                        <i-form-item label="图文详情：">
                            <quill-editor
                                ref="goodsDetailEditor"
                                v-model="form.base.detail"
                                :options="editorOption"
                            ></quill-editor>
                        </i-form-item>
                    </i-form>
                </div>
                <div class="gc-submit">
                    <i-button type="primary" @click.native="step = step + 1">下一步</i-button>
                </div>
            </div>
            <div class="gf-common gf-spec" v-else-if="step === 1">
                <div class="gc-input">
                    <i-table :columns="columns" :data="data">
                        <template slot="spec">
                            <i-cascader></i-cascader>
                        </template>
                        <template slot="cover">
                            <img-video-previewer></img-video-previewer>
                        </template>
                        <template slot="amount">
                            <i-input placeholder="金额"></i-input>
                        </template>
                        <template slot="stock">
                            <i-input placeholder="库存"></i-input>
                        </template>
                        <template slot-scope="{ index }" slot="action">
                            <i-button type="primary" size="small">编辑</i-button>
                            <i-button
                                style="marginLeft: 10px;"
                                size="small"
                                @click="remove(index)"
                            >删除</i-button>
                        </template>
                    </i-table>
                </div>
                <div class="gc-add">
                    <div class="ga-btn">
                        <span>新增</span>
                    </div>
                </div>
                <div class="gc-submit">
                    <i-button @click.native="step = step - 1">上一步</i-button>
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="step = step + 1"
                    >下一步</i-button>
                </div>
            </div>
            <div class="gf-common gf-promote" v-else-if="step === 2">
                <div class="gc-input">
                    <i-form :model="form.promote" :label-width="100">
                        <i-form-item label="赠送积分：">
                            <i-input v-model="form.promote.gift" placeholder="积分"></i-input>
                        </i-form-item>
                        <i-form-item label="推荐：">
                            <i-checkbox-group v-model="checkbox.recommond">
                                <i-checkbox label="新品"></i-checkbox>
                                <i-checkbox label="推荐"></i-checkbox>
                                <i-checkbox label="热卖"></i-checkbox>
                            </i-checkbox-group>
                        </i-form-item>
                        <i-form-item label="关联词：">
                            <i-input v-model="form.promote.keywords" placeholder="多个用;分割"></i-input>
                        </i-form-item>
                    </i-form>
                </div>
                <div class="gc-submit">
                    <i-button @click.native="step = step - 1">上一步</i-button>
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="step = step + 1"
                    >下一步</i-button>
                </div>
            </div>
            <div class="gf-common gf-success" v-else-if="step === 3">
                <div class="gs-icon">
                    <i class="iconfont icon-chenggong"></i>
                </div>
                <div class="gs-text">
                    <span>添加商品成功</span>
                </div>
                <div class="gs-description">
                    <p>
                        提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用
                        Message
                        全局提示反馈即可。灰色区域可以显示一些补充的信息。
                    </p>
                </div>
                <div class="gs-link">
                    <i-button
                        type="primary"
                        style="margin-left: 8px"
                        @click.native="go('/goods/info?id=1093')"
                    >查看商品</i-button>
                    <i-button style="margin-left: 8px">返回列表</i-button>
                </div>
            </div>
        </div>
        <div class="ga-notice">
            <div class="gn-common gn-base" v-if="step === 0">
                <div class="gc-title">
                    <span>说明</span>
                </div>
                <div class="gc-content">
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                    <div class="gc-item">
                        <div class="gi-label">
                            <span>注意信息</span>
                        </div>
                        <div class="gi-text">
                            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import imgVideoPreviewer from '@/components/img-video-uploader'
export default {
    components: {
        quillEditor,
        imgVideoPreviewer
    },
    data() {
        return {
            step: 0,
            cascader: {
                goodsCategory: []
            },
            select: {
                goodsBrand: []
            },
            checkbox: {
                recommond: ""
            },
            form: {
                base: {
                    name: '',
                    title: '',
                    description: '',
                    marketAmount: '',
                    amount: '',
                    detail: ''
                },
                promote: {
                    gift: 0,
                    keywords: ''
                }
            },
            columns: [
                {
                    title: '规格',
                    slot: 'spec'
                },
                {
                    title: '封面',
                    slot: 'cover'
                },
                {
                    title: '价格',
                    slot: 'amount'
                },
                {
                    title: '库存',
                    slot: 'stock'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            data: [],
            editorOption: {
                placeholder: '编辑文章内容'
            },
            content: '',
        }
    },
    methods: {
        show(index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
            })
        },
        remove(index) {
            this.data6.splice(index, 1);
        },
        onEditorChange({ html }) {
            this.content = html;
        }
    }
}
</script>

<style lang="less">
.goods-add {
    padding: 10px;
    background: white;
    .ga-step {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .ga-form {
        display: flex;
        justify-content: center;
        padding: 20px 0 40px 0;
        .gf-common {
            width: 600px;
            .gc-submit {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
            }
        }
        .gf-base {
            .ql-container {
                height: 500px;
            }
        }
        .gf-spec {
            width: 900px;
            .gc-add {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                margin-top: 20px;
                border: 1px dashed #e9e9e9;
            }
        }
        .gf-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            .gs-icon {
                i {
                    font-size: 100px;
                    color: #19be6b;
                }
            }
            .gs-text {
                font-size: 18px;
                color: #000;
            }
            .gs-description {
                padding: 20px 0;
            }
        }
    }
    .ga-notice {
        .gn-common {
            padding: 10px;
            border: 1px solid #abdcff;
            background: #f0faff;
            .gc-title {
                display: flex;
                align-items: center;
                height: 40px;
                span {
                    font-size: 18px;
                }
            }
            .gc-content {
                .gc-item {
                    .gi-label {
                        height: 30px;
                        span {
                            font-size: 16px;
                        }
                    }
                    &:not(:first-child) {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
}
</style>